<template>
  <div>
    <Grid :col="1" :border="false" padding="5px">
      <GridItem>
        <Button icon="md-add-circle" type="primary" @click="addSys" style="margin-right: 5px">添加系统</Button>
        <Button icon="ios-remove-circle-outline" type="error" @click="batchRemoveSys">批量删除</Button>
      </GridItem>
    </Grid>

    <Table border :columns="columns" :data="data" @on-selection-change="selection = $event">
      <template #name="{ row }">
        <strong>{{ row.sysName }}</strong>
      </template>

      <template #action="{ row, index }">
        <Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="modifySys(row)">修改</Button>
        <Button type="error" icon="ios-remove-circle-outline" size="small" @click="remove(index)">移除</Button>
      </template>

      <template #status="{ row, index }">
        <DotTag type="primary" v-if="row.state">正常</DotTag>
        <DotTag type="error" v-else>失效</DotTag>
      </template>

      <template #description="{ row, index }">
        <span v-line-clamp="2">{{ row.description }}</span>
      </template>

    </Table>

    <Drawer
        :title="drawer.title"
        v-model="drawer.state"
        width="720"
        @on-close="closeWin(false)"
        :mask-closable="false"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
      <!-- 引入系统表单组件 -->
      <SysForm :drawer="drawer.row" ref="sys" @close-win="closeWin"></SysForm>
    </Drawer>

  </div>
</template>
<script>
import SysForm from '../components/sys/SysForm.vue'
import DotTag from '../components/DotTag.vue'

export default {
  data() {
    return {
      drawer: {
        state: false,
        title: "",
        row: {
          sysName: "", url: "", description: "", state: true
        }
      },
      selection: [] , // 选中的所有数据
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '系统名',
          slot: 'name',
          width: 240,
        },
        {
          title: '系统编码',
          key: 'remark',
          width:150,
        },
        {
          title: '系统前缀地址',
          key: 'url',
          width: 200,
        },
        {
          title: '系统描述',
          slot: 'description'
        },
        {
          title: '系统状态',
          slot: 'status',
          width: 120,
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        }
      ],
      data: [
        {
          id: 1,
          sysName: '权限管理系统',
          remark: 'rbac',
          url: "http://localhost:8080/",
          description: 'RBAC（Role-Based Access Control，基于角色的访问控制）是一种在计算机系统中控制访问权限的安全模型。它是一种常见的访问控制策略，广泛应用于多用户、多角色的系统中，如企业应用、网络应用、操作系统等。在 RBAC 模型中，用户被分配到一个或多个角色，而角色被授予一组权限。用户通过角色来获得对资源的访问权限，而不是直接分配给用户单独的权限。这种模型可以使权限管理更加灵活、可扩展和易于维护。',
          state: true
        },
        {
          id: 2,
          sysName: '爱下载资源分享平台管理系统',
          remark: 'love-down',
          url: "http://localhost:8081/",
          description: '爱下载管理平台',
          state: true
        },
        {
          id: 3,
          sysName: '积分商城管理系统',
          remark: 'score-commerce',
          url: "http://localhost:8082/",
          description: '积分兑换商品',
          state: true
        }
      ],
    }
  },
  methods: {
    addSys() {
      this.drawer.state = true;
      this.drawer.title = "添加系统";
      this.drawer.row = {sysName: "", url: "", description: "", state: true, remark: ""}
    },
    modifySys(row) {
      this.drawer.state = true;
      this.drawer.title = "修改系统";
      this.drawer.row = {...row};
    },
    remove(index) {
      this.$tips.confirm("您确定要删除该系统吗?").then(() => {
        this.data.splice(index, 1);
      })
    },
    batchRemoveSys(){
      if (this.selection.length === 0) {
         this.$tips.warning("请至少选中一个需要删除的系统");
      }else{
         this.$tips.confirm("您确定要删除选中的所有系统吗?").then(() => {
             // 删除多个系统
            console.log(this.selection.map(sys => sys.id));
         })
      }
    },
    closeWin(status) { // 根据不同的status 可以做不同的事情
      this.drawer.state = false;
      this.$refs.sys.resetValidForm();
    }
  },
  components: {
    SysForm,
    DotTag
  }
}
</script>

